<template>
       <div class="index-wrap">
           <div class="container">
               <div class="swiper-box">
                   <div class="nav-menu">
                       <ul class="menu-wrap">
                           <li class="menu-item">
                               <a href="javascript:;">手机卡 电话卡</a>
                               <div class="children">
                                   <ul v-for="(items,i) in menuList" :key="i">
                                       <li v-for="(item,j) in items" :key="j">
                                           <a :href="item?'/product/'+item.id:''">
                                               <img :src="item?item.img:'/imgs/item-box-1.png'" alt="">
                                               {{item.name || '小米9'}}
                                           </a>
                                       </li>
                                   </ul>
                               </div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">电视 盒子</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">笔记本 平板</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">家电 插线板</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">出行 穿戴</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">智能 路由器</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">电源 配件</a>
                               <div class="children"></div>
                           </li>
                           <li class="menu-item">
                               <a href="javascript:;">生活 箱包</a>
                               <div class="children"></div>
                           </li>
                       </ul>
                   </div>
                   <swiper :options="swiperOption" >
                       <!-- slides -->
                       <swiper-slide :key="indexSlide" v-for="(item,indexSlide) in slideList">
                           <a :href="'/product/'+item.id"><img :src="item.img"></a>
                       </swiper-slide>
                       <div class="swiper-pagination"></div>
<!--                           <div class="swiper-pagination"  slot="pagination"></div>-->
                       <div class="swiper-button-prev" slot="button-prev"></div>
                       <div class="swiper-button-next" slot="button-next"></div>
                       <div class="swiper-scrollbar"   slot="scrollbar"></div>
                   </swiper>

               </div>
               <div class="abs-box">
                   <a :href="'/product/'+item.id" v-for="(item,absIndex) in adsList" :key="absIndex">
                       <img v-lazy="item.img" alt="">
                   </a>
               </div>
               <div class="abs-banner">
                   <a href="'/product/30'">
                       <img v-lazy ="'/imgs/banner-1.png'" alt="广告位">
                   </a>
               </div>
           </div>
           <div class="product-box">
               <div class="container">
                   <h2>手机</h2>
                   <div class="product-box-wrapper">
                       <div class="product-banner-left">
                           <a href="/product/35"><img v-lazy="'/imgs/mix-alpha.jpg'" alt=""></a>
                       </div>
                       <div class="product-index-box">
                           <div class="product-box-list" v-for="(list,i) in phoneList" :key="i">
                               <div class="box-list-item" v-for="(item, j) in list" :key="j">
                                   <span :class="j % 2==0?'new-pro':'kill-pro'">{{j % 2==0?'新品':'秒杀'}}</span>
                                   <div class="item-img">
                                       <img v-lazy="item.mainImage" alt="">
                                   </div>
                                   <div class="item-info">
                                       <h3>{{item.name}}</h3>
                                       <p>{{item.subtitle}}</p>
                                       <p class="item-info-price" @click="addCart(item.id)">{{item.price}}元</p>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           <service-bar></service-bar>
           <modal
               title="提示"
               sureText="查看购物车"
               btnType="1"
               modalType="middle"
               v-bind:showModal="showModal"
               @submit="goToCart()"
               @cancel="showModal=false"
           >
                <template v-slot:body>
                    <p>商品添加成功</p>
                </template>
           </modal>
       </div>
</template>

<script>
    import ServiceBar from "./components/ServiceBar";
    import Modal from "./components/Modal";
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    export default {
        name: "index",
        components: {
            Swiper,
            SwiperSlide,
            ServiceBar,
            Modal
        },
        computed:{
        },

        data(){
            return{
                slideList:[
                    {id:"42",img:"/imgs/slider/slide-1.jpg"},
                    {id:"45",img:"/imgs/slider/slide-2.jpg"},
                    {id:"46",img:"/imgs/slider/slide-3.jpg"},
                    {id:"",img:"/imgs/slider/slide-4.jpg"},
                    {id:"",img:"/imgs/slider/slide-5.jpg"}
                ],
                menuList:[
                    [
                        {"id":30,"img":'/imgs/item-box-1.png',"name":"小米CC9"},
                        {"id":30,"img":'/imgs/item-box-2.png',"name":"小米8青春版"},
                        {"id":30,"img":'/imgs/item-box-3.jpg',"name":"Remi K20 Pro"},
                        {"id":30,"img":'/imgs/item-box-4.jpg',"name":"移动4G专区"}
                    ],
                    [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]
                ],
                adsList:[
                    {"id":33,"img":"/imgs/ads/ads-1.png"},
                    {"id":48,"img":"/imgs/ads/ads-2.jpg"},
                    {"id":45,"img":"/imgs/ads/ads-3.png"},
                    {"id":47,"img":"/imgs/ads/ads-4.jpg"}
                ],
                phoneList:[
                    [0,0,0,0],[0,0,0,0]
                ],
                swiperOption:{
                    autoplayDisableOnInteraction:false,
                    loop : true,
                    effect : 'cube',
                    cubeEffect: {
                        slideShadows: true,
                        shadow: true,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },

                    pagination: {
                        el: '.swiper-pagination'
                    }
                },
                //控制弹出框
                showModal:false
            }
        },

        mounted() {
            this.productList()
        },
        methods:{
            addCart(id){
                this.axios.post('/carts',{
                    productId:id,
                    selected: true
                }).then((res={cartProductVoList:0})=>{
                    this.$store.dispatch('saveCartCount',res.cartTotalQuantity);
                    this.showModal = true
                });
            },
            productList(){
                this.axios.get('/products',{
                    params:{
                        categoryId:100012,
                        pageSize:14
                    }
                }).then((res) => {
                    res.list = res.list.slice(6,14)
                    this.phoneList = [res.list.slice(0,4),res.list.slice(4,8)]
                })
            },
            goToCart(){
                this.$router.push('/cart')
            }
        }

    }
</script>

<style lang="scss">
    @import "./../assets/scss/base.scss";
    @import "./../assets/scss/mixin.scss";
    @import "./../assets/scss/config.scss";
    .index-wrap{
        .swiper-box{
            width: 100%;
            .nav-menu{
                position: absolute;
                width: 264px;
                height: 451px;
                z-index: 12;
                padding: 26px 0;
                background-color: #55585a85;
                box-sizing: border-box;
                .menu-wrap{
                    .menu-item{
                        height: 50px;
                        line-height: 50px;

                        a{
                            position: relative;
                            color: #ffffff;
                            padding-left: 30px;
                            display: block;
                            font-size: 14px;
                            z-index: 15;
                            &:after{
                                content: ' ';
                                position: absolute;
                                right: 30px;
                                top: 17.5px;
                                @include bgimg(10px,15px,'/imgs/icon-arrow.png')
                            }
                        }
                        &:hover{
                            background-color: #ff6600;
                            .children{
                                display: block;
                            }

                        }
                        .children{
                            display: none;
                            width: 962px;
                            height: 451px;
                            background-color: $colorG;
                            position: absolute;
                            top: 0px;
                            left: 264px;
                            border: 1px solid $colorH;
                            box-sizing: border-box;
                            ul{
                                display: flex;
                                justify-content: space-between;
                                height: 75px;
                                li{
                                    height: 75px;
                                    line-height: 75px;
                                    width: 241px;
                                    flex: 1;
                                    padding-left: 23px;
                                }
                                a{
                                    color: $colorB;
                                    font-size: 14px;
                                }
                                img{
                                    width: 42px;
                                    height: 35px;
                                    vertical-align: middle;
                                    margin-right: 15px;
                                }
                            }
                        }
                    }

                }
            }
            .swiper-container{
                height: 451px;
                .swiper-button-prev{
                    left: 274px;
                }
                .swiper-wrapper{
                    .swiper-slide{
                        a{
                            height: 451px;
                            display: block;
                            img{
                                width: 100%;
                                height: 451px;
                            }
                        }
                    }
                }


            }

        }
            .abs-box{
                @include flex();
                width: 100%;
                margin-top: 14px;
                margin-bottom: 31px;
                a{
                    width: 296px;
                    height: 167px;
                }
            }
            .abs-banner{
                margin-bottom: 50px;
            }
            .product-box{
                background-color: $colorJ;
                padding: 30px 0px 50px;
                h2{
                    font-size: $fontF;
                    height: 21px;
                    line-height: 21px;
                    color: $colorB;
                    margin-bottom: 20px;
                }
                .product-box-wrapper{
                    display: flex;
                    .product-banner-left{
                        margin-right: 16px;
                        img{
                            width: 224px;
                            height: 619px;
                        }
                    }
                    .product-index-box{

                        .product-box-list{
                            @include flex();
                            width: 986px;
                            margin-bottom: 14px;
                            &:last-child {
                                margin-bottom:0px
                            }
                            .box-list-item{
                                width: 236px;
                                height: 302px;
                                flex: 1;
                                background-color: $colorG;
                                text-align: center;
                                margin-left: 14px;
                                span{
                                    display: inline-block;
                                    width: 64px;
                                    height: 24px;
                                    font-size: 14px;
                                    line-height: 24px;
                                    color: #e5e5e5;
                                    &.new-pro{
                                        background-color: #7ECF68;
                                    }
                                    &.kill-pro{
                                        background-color: #E82626;
                                    }

                                }
                                .item-img{
                                    img{
                                        height: 195px;
                                        width: 100%;
                                    }
                                }
                                .item-info{
                                    h3{
                                        font-size: $fontJ;
                                        color: $colorB;
                                        line-height: $fontJ;
                                        font-weight: bold;
                                    }
                                    p{
                                        color: $colorD;
                                        line-height: 13px;
                                        margin: 6px auto 13px;
                                    }
                                    .item-info-price{
                                        color: #F20A0A;
                                        font-size: $fontJ;
                                        cursor: pointer;
                                        &:after{
                                            content: ' ';
                                            @include bgimg(22px,22px,'/imgs/icon-cart-hover.png');
                                            margin-left: 5px    ;
                                            vertical-align: middle;
                                        }
                                    }
                                }
                            }

                        }
                    }

                }
            }

    }
</style>
